<template>
  <div class="wrapper-list">
    <!-- 列表区 -->
    <div class="wrapper-table">
      <el-table
        v-loading="flagLoading"
        :data="tblDataList"
        row-key="id"
        fit
        size="small"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="编号" align="center" width="50" prop="id" />

        <el-table-column align="left" label="标题">
          <template #default="scope">
            <el-link @click="showArticle(scope.row.id)">{{ scope.row.Title }}</el-link>
            <span v-if="hasTitleImg(scope.row)">
              <el-icon><PictureFilled /></el-icon>
            </span>
            <span class="symbol-text">{{ getShowSymbol(scope.row) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="栏目名称" align="center" width="90" prop="CategoryName" />

        <el-table-column label="点击" align="center" width="60" prop="Click" />

        <el-table-column label="编辑" align="center" width="60" prop="EditorName" />

        <el-table-column label="发布时间" align="center" width="150" prop="DtPublish" />

        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <button class="btn btn-blue" title="还原" @click="onRestore(scope.row.id)">
              <el-icon><RefreshLeft /></el-icon>
            </button>
            <button class="btn btn-red" title="删除" @click="onDelete(scope.row.id)">
              <el-icon><Delete /></el-icon>
            </button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区 -->
    <div class="wrapper-pager">
      <el-pagination
        :current-page="pageCurrent"
        :page-sizes="pageSizeArrray"
        :page-size="pageSize"
        :total="recordCount"
        :page-count="pageCount"
        background
        small
        layout="prev, pager, next, jumper, sizes"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>

    <!-- 显示文章内容 -->
    <el-dialog
      v-model="flagDialogVisible"
      :title="article.title"
      width="70%"
      :close-on-click-modal="false"
    >
      <div class="wrapper-article">
        <h4>{{ article.Title }}</h4>
        <div v-html="article.Content"></div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="flagDialogVisible = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ArticleDateTimeFormater } from '@/utils/cell-formater'
import { toastSuccess } from '@/utils/toast'
import { setSStorageObj } from '@/utils/web-storage'

import { ElMessageBox } from 'element-plus'

import router from '@/router'
import store from '@/store'
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'ArticleRecycleView',
  components: {},
  setup() {
    const tblDataList = ref([])
    const flagLoading = ref(true)

    const pageCurrent = ref(1)
    const pageSize = ref(20)
    const pageSizeArrray = ref([10, 20, 30, 40])
    const recordCount = ref(0)
    const pageCount = ref(1)

    const flagDialogVisible = ref(false)
    const article = ref({})
    // 是否带标题图和标题视频
    const flagTitleImg = ref(false)
    const flagTitleVideo = ref(false)

    // 分页获取文章列表
    const listPage = () => {
      flagLoading.value = true
      const paramsJson = {
        PageCurrent: pageCurrent.value,
        PageSize: pageSize.value,
        CategoryId: '0',
      }
      store
        .dispatch('article/listPageRecycle', paramsJson)
        .then((response) => {
          flagLoading.value = false
          if (response) {
            tblDataList.value = response.ListData
            recordCount.value = Number(response.RecordCount)
            pageCount.value = response.PageCount
          } else {
            tblDataList.value = []
            recordCount.value = 0
            pageCount.value = 1
          }
        })
        .catch((error) => {
          flagLoading.value = false
          console.log('分页获取某栏目下所有回收站文章列表出现错误：', error)
        })
    }
    // 格式化时间
    const formatDate = (cellValue) => {
      if (cellValue === '' || cellValue === '0') return ''
      return ArticleDateTimeFormater(cellValue)
    }
    // 点击每页记录数大小下拉菜单
    const onSizeChange = (pageSize) => {
      pageSize.value = pageSize
      listPage()
    }
    // 点击分页页码
    const onCurrentChange = (pageCurrent) => {
      pageCurrent.value = pageCurrent
      listPage()
    }
    // 恢复文章
    const onRestore = (id) => {
      store
        .dispatch('article/queryById', id)
        .then((response) => {
          setSStorageObj('ParamData', response)
          router.push({ path: 'edit' })
        })
        .catch((error) => {
          console.log('根据文章id得到文章详情出现错误：', error)
          router.push({ path: 'list-page' })
        })
    }
    // 删除文章
    const onDelete = (id) => {
      ElMessageBox.confirm('确定要删除该文章吗？', '删除警告', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          store
            .dispatch('article/delByIdReal', id)
            .then(() => {
              toastSuccess('删除成功！')
              listPage()
            })
            .catch((error) => {
              console.log('删除文章时出现错误：', error)
            })
        })
        .catch(() => {})
    }
    const showArticle = (id) => {
      store
        .dispatch('article/queryById', id)
        .then((response) => {
          flagDialogVisible.value = true
          article.value = response
        })
        .catch((error) => {
          console.log('得到文章详情出现错误：', error)
        })
    }
    const hasTitleImg = (article) => {
      return article.UrlTitlePic && article.UrlTitlePic.length > 0
    }
    const getShowSymbol = (article) => {
      let result = ''
      const symbolShow = article.SymbolShow
      if (symbolShow.indexOf('a') !== -1) {
        result += '[特荐]'
      }
      if (symbolShow.indexOf('b') !== -1) {
        result += '[加粗]'
      }
      if (symbolShow.indexOf('c') !== -1) {
        result += '[推荐]'
      }
      if (symbolShow.indexOf('f') !== -1) {
        result += '[幻灯]'
      }
      if (symbolShow.indexOf('h') !== -1) {
        result += '[头条]'
      }
      if (symbolShow.indexOf('j') !== -1) {
        result += '[跳转]'
      }
      if (symbolShow.indexOf('p') !== -1) {
        result += '[图片]'
      }
      if (symbolShow.indexOf('s') !== -1) {
        result += '[滚动]'
      }
      return result
    }

    onMounted(() => {
      listPage()
    })

    return {
      tblDataList,
      flagLoading,
      pageCurrent,
      pageSize,
      pageSizeArrray,
      recordCount,
      pageCount,
      flagDialogVisible,
      article,
      flagTitleImg,
      flagTitleVideo,
      listPage,
      formatDate,
      onSizeChange,
      onCurrentChange,
      onRestore,
      onDelete,
      showArticle,
      hasTitleImg,
      getShowSymbol,
    }
  },
})
</script>

<style lang="scss" scoped>
.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
  margin-left: 0.6rem;
  .svg-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.symbol-text {
  display: inline-block;
  vertical-align: middle;
  color: red;
  line-height: 1.8rem;
  margin-left: 0.6rem;
}
.wrapper-article {
  h4 {
    font-size: 20px;
    text-align: center;
  }
}
</style>
